<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }

      /* Custom icon for MilestoneClass "RedSvg" */
      .GWGanttRedSvgMilestone,.GSGanttRedSvgMilestone,.GMGanttRedSvgMilestone,.GBGanttRedSvgMilestone,.GTGanttRedSvgMilestone { background:url(Red.svg) no-repeat; }
      .GWGanttRedSvgMilestoneHover,.GSGanttRedSvgMilestoneHover,.GMGanttRedSvgMilestoneHover,.GBGanttRedSvgMilestoneHover,.GTGanttRedSvgMilestoneHover { background:url(RedHover.svg) no-repeat; }
   </style>
   <script>
   var BIE5 = navigator.appName.search("Microsoft")>=0 && document.compatMode!="CSS1Compat" && document.documentMode<10; // IE5 quirks mode
   // ------------------------------------------------------------------------------------
   // Returns custom Main bar content, only for row 19
   Grids.OnGetGanttHtml = function(G,row,col,width,comp,crit,plan,idx,txt){
   if(row.id==19) {
      var main = G.GetGanttMain(row,col);
      return "<div style='background:#EA8; float:left; font-size:20px; line-height:35px; width:15px;text-align:center;'>"+(idx+1)+"</div><div style='height:35px;'>"
         + "<div style=\"background:#396;color:white;padding:1px;line-height:16px;"+(BIE5?"overflow:hidden;width:100%;":"")+"\">&nbsp;"+DateToString(main[idx][0]-0,"dddddd")+" - "+DateToString(main[idx][1]-0,"dddddd")+"</div>"
         + "<div style=\"background:#369;color:white;padding:1px;line-height:16px;"+(BIE5?"overflow:hidden;width:100%;":"")+"\">&nbsp;"+G.DiffGanttDate(main[idx][1],main[idx][0],'d')+" days </div>"
         + "</div>";
      }
   return txt; // All other rows
   }
   // ------------------------------------------------------------------------------------
   </script>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>2. Main bar parts</h1>
   <h2>Discrete main bar with more milestones</h2>
   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='02-Main_bar_parts.xml'>02-Main_bar_parts.xml</a></div>
      <div class="Main" style='width:100%; height:615px;'>
         <bdo Debug='check' Data_Url='02-Main_bar_parts.xml'></bdo>
      </div>
   </center>

   <ul>
      <li>
         There are five tutorials for Gantt task types and features:
         <ul>
            <li><a href='01-Main_bar.html'>1. Simple Main bar and Milestone</a> - Continuous bar or one milestone</li>
            <li>2. Main bar parts - Discrete main bar with more milestones</li>
            <li><a href='03-Main_bar_plans.html'>3. Main bar plans</a> - More independent main bars or milestones in one row</li>
            <li><a href='../GanttRunBar/06-Run_bar_as_task.html'>6. Run bar as task</a> - Complex and extended Gantt task from individual parts</li>
            <li><a href='../GanttRunBar/07-Run_box_as_task.html'>7. Run box as task</a> - Every Run box as independent Gantt task</li>
         </ul>
      </li>
      <li>See documentation for <b><a href="../../Doc/GanttMain.htm">Main bar</a></b></li>
      <li>
         The discrete main bar is defined by <h3>GanttParts</h3> attribute, as one or more date ranges like "1/1/2010~1/3/2010;1/8/2010~1/12/2010".<br />
         It is also possible to define the attributes <b>GanttStart</b>, <b>GanttEnd</b> and <b>GanttDuration</b>, their values will be calculated from the <b>GanttParts</b>.<br />
      </li>
      <li>
         If set <b>GanttLastUnit</b>, the set end date is increased by this one unit (usually 'd' as day), the second date in every range in GanttParts and the GanttEnd means the last unit in this case.<br />
      </li>
      <li>
         The individual parts of the discrete main bar cannot be individually identified, after move or resize they are automatically joined and sorted. 
         To have individually identified parts use <b>GanttRun</b> instead, see <a href='04-Main_bar_by_Run.html'>4. Main bar by Run</a>.<br />
         When moving one main bar part on another, they are automatically <h4>joined</h4>. To not join them set <b>GanttJoin</b> attribute to 0 or -1.<br />
         If you want to overlay the boxes with some text on them, you can set <b>GanttTextOverlay='1'</b> to show only one text at one place.
      </li>
      <li>
         To support dependencies, resources, manual start, percentage completion and disabled / locked state there must be set <h3>GanttTask</h3> to the main bar plan like "<b>Main</b>", "<b>Main1</b>", "<b>Main2</b>", ... or for all plans as "<b>All</b>". 
         Default setting is GanttTask="Main" = only the first main bar plan supports the task features.<br />
         <b><i>Dependencies are always attached to the whole task - only to start of the first part and / or to end of the last part.</i></b><i> To attach dependencies or resources to individual boxes, use <b>GanttRun</b> instead.</i>
      </li>
      <li>
         <h4>Milestone</h4> is created as a range with only start or end defined, like "1/10/2010~" as start milestone or "~1/1/2010" as end milestone.<br />
         Don't confuse with range defined only by one date like "1/10/2010" - it means one day bar.<br />
         There is difference between start milestone and end milestone. The end milestone is affected by GanttLastUnit
         and also if the milestone is set within excluded range, the end milestone is shown before the range and start milestone after the range.<br />
         The milestone has only two states: complete (GanttComplete=100) and incomplete.<br />
         There can be more milestones or bars and milestones together in one main bar, but for the Gantt calculation it has no effect.<br />
      </li>
      <li>
         Main bar <h4>content</h4> is defined by <h3>GanttHtml</h3> attribute. Main bar can show any text or html code. Milestone cannot show any content.<br />
         The content is for all the parts the same, but it can show the part specific index or start date, end date or duration.
         The discrete main bar usually does <b>not</b> show user text defined by <b>GanttText</b> attribute, because it would be shown in every part.<br />
         The main bar content can be generated also dynamically for every part different by <b>OnGetGanttHtml</b> API event.<br />
      </li>
      <li>
         Main bar <h4>side text</h4>. Main bar can show two side texts or any HTML content. The side texts are defined by <h3>GanttHtmlLeft</h3> and <h3>GanttHtmlRight</h3>.<br />
         The texts horizontal position is controlled by <b>GanttHtmlLeftEdge</b> and <b>GanttHtmlRightEdge</b>, the available positions are before, inside left, centered, inside right and after.<br />
         Vertical position is set by <b>GanttHtmlShift</b>. It is also possible to generate the side texts by API event <b>OnGetGanttSideHtml</b> to achieve any count and positions of the main bar side content.<br />
         By the API event create especially different content for individual parts.<br />
      </li>
      <li>
         Main bar <h4>tooltip</h4> is defined by <h3>GanttTip</h3>. Milestone tooltip is defined by <b>GanttMilestoneTip</b>. The tip can show any text or html code.<br />
         The tip is for all the parts the same, but it can show the part specific index or start date, end date or duration.
         By default the main bar tooltip shows user text defined by <h3>GanttText</h3> attribute.<br />
         The main bar and milestone tooltip can be generated also dynamically for every part different by <b>OnGanttTip</b> API event.<br />
      </li>
      <li>
         Task <h4>percentage completion</h4> is set by <h3>GanttComplete</h3> attribute in range 0 - 100.<br /> 
         The task completion is set and calculated for the whole task, not for the individual parts.<br />
         The completion state is shown only if the main bar plan is included in <b>GanttTask</b>, see above.<br />
         If used calendar / excluded dates, the percentage completion can be shown preciselly for the excluded dates if set <b>GanttExcludeComplete</b>.<br />
         To round the percentage completion to some units (GanttUnits or GanttDataUnits) when is set by click to bar use <b>GanttRoundComplete</b>.
      </li>
      <li>
         Task can be <h4>disabled</h4> or <h4>locked</h4>. The state is set by <h3>GanttDisabled</h3> attribute or column.<br />
         Only the whole task can be disabled or locked, not the individual parts.
         The disabled / locked state is used only if the main bar plan is included in <b>GanttTask</b>, see above.<br />
         Disabled task cannot be changed and is also ignore in all calculations. Locked tasks cannot be changed.<br />
         It is possible to permit changing the disabled/locked tasks manually by a user by <b>GanttEditDisabled</b>='1'.<br />
         To have not editable task, remove the main bar plan from <b>GanttEdit</b> and also set <b>CanEdit='0'</b> to all the source cells.<br />
      </li>
      <li>
         <h4>Dependencies</h4> are attached always for the whole main bar not to individual parts. Normally by <h3>GanttDescendants</h3> or by <h3>GanttAncestors</h3>.<br />
         To the first part are attached start dependencies, to the last part are attached finish dependencies.<br />
         If the GanttTask contains only one main bar plan and also no run/box, the main bar need not be identified for dependency and the row id is enough, e.g. GanttDescendants = "R1" or "R2#11;R3"<br />
         If the are more flags in GanttTask, the main bar is identified by its plan number, 0 for the first one, e.g. GanttDescendants="0@R1" or "1,1@R2#11;0,1@R3"<br />
         See documentation for <a href="../../Doc/GanttCompute.htm#Dependencies">Defining dependencies</a>.
      </li>
      <li>
         <h4>Manual start</h4> for correcting dependencies is set by <h3>GanttManual</h3>. <br />
         It is permitted / controlled by attributes <b>GanttManualChange</b> and <b>GanttManualSide</b>.<br />
      </li>
      <li>
         <h4>Resources</h4> are attached by <b>GanttResources</b>.<br />
         See documentation for <a href="../../Doc/GanttResources.htm#Assign">Resources assign</a>.
      </li>
      <li>
         Main bar <h4>style</h4> can be controlled by <h3>GanttClass</h3> attribute. For side texts by <b>GanttHtmlLeftClass</b> and <b>GanttHtmlRightClass</b>.<br />
         For milestones can be set special class by <b>GanttMilestoneClass</b>. The milestone class specifies predefined or custom icon for milestone.<br />
         There are predefined 17 standards colored bars and 10 colored milestones.
      </li>
      <li>
         The main bar can show <h4>side icons</h4> on one or both its sides just for visual effect, set by <b>GanttIcons</b>. <br />
         The icons can be default icons for summary tasks or any custom icons defined by <b>GanttIconLeft</b> and / or <b>GanttIconRight</b>.
         There are also special interrupt icons that can be shown between the main bar parts.<br />
      </li>
      <li>
         Main bar <h4>position and height</h4>.
         Main bar can be shifted vertically by <b>GanttTop</b> attribute.<br />
         The height of the main bar can be set by <b>GanttHeight</b> attribute.<br />
         All parts in one main bar have the same height and vertical position. Except the part height is updated according to the part content.
      </li>
      <li>
         When <h4>moving</h4> the first part of the discrente main bar by dragging, all parts are moved. When dragging other parts, only the one part is moved. This behavior can be changed by assigning different actions to the drag events.<br />
         When moving discrete main bar for correcting dependencies, always the whole bar moved, all the spaces between parts are preserved.<br />
      </li>
      <li>
         Main bar can be controlled also from JavaScript by <h4>API</h4>, especially by methods <b>GetGanttMain</b> and <b>SetGanttMain</b> and events <b>OnGanttMainChange</b> and <b>OnGanttMainChanged</b>.
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialGantt\s*=\s*(\d+)/), TGIndex = 4096;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridMain2", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialGantt="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>